import React, {Component} from 'react';
import echarts from 'echarts'
import '../css/LeftTop.css'

class RightBottom extends Component {

    constructor(props) {
        super(props);
        console.log("初始化");

    }

    componentDidMount() {
        let myChart = echarts.init(document.getElementById('right-bottom'));

        let option = {
            baseOption: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    y: '10',
                    x: '10',
                    orient: 'vertical',
                    align: 'right',
                    data: ['学校', '医院', '车站', '商场'],
                    textStyle: {
                        color: "white"
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '面积模式',
                        type: 'pie',
                        radius: [30, 110],
                        roseType: 'area',
                        data: [
                            {value: 10, name: '学校'},
                            {value: 5, name: '医院'},
                            {value: 15, name: '车站'},
                            {value: 25, name: '商场'},
                        ],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorList = [
                                        '#12c2fb', '#ddcd3b', '#1886ff', '#f45945'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                            }


                        },
                    }
                ]
            },
            media: [
                {
                    grid: {
                        top: '50%',

                    },
                }
            ]
        };

        myChart.setOption(option);

    }

    render() {
        return (

            <div className="data-box5" id="right-bottom"><i className="topL"/> <i className="topR"/> <i
                className="bottomL"/> <i className="bottomR"/>


            </div>
        );
    }
}

export default RightBottom;
